<template>
  <div>
    <van-nav-bar title="仿真考题" left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-dropdown-menu>
      <van-dropdown-item title='考试类型'>
          <van-cell v-for='(item,index) in list' :key='item' :class='{isShow:active===index}' :title="item" @click='change1(index)'/>
      </van-dropdown-item>
       <van-dropdown-item title='考试状态'>
          <van-cell v-for='(item,index) in list2' :key='item' :class='{isShow:active===index}' :title="item" @click='change2(index)'/>
      </van-dropdown-item>
      <van-dropdown-item title='状态参考'>
          <van-cell v-for='(item,index) in list3' :key='item' :class='{isShow:active===index}' :title="item" @click='change3(index)'/>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="img" v-if='!show'>
      <van-empty description="请稍后，模考正在赶来的路上啦" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['全部', '模拟考试', '正式考试'],
      list2: ['全部', '未开始', '进行中','已结束'],
      list3: ['全部', '已做', '未做'],
      show:false,

      active: 0,
      // isShow:false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.push("/exercise");
    },
    change1(index){
       this.active = index
    },
     change2(index){
       this.active = index
    },
     change3(index){
       this.active = index
    }
  }
};
</script>

<style scoped>
.isShow{
  color:orange;
}
</style>
